<script lang="ts" setup>
import * as QuestionApi from "@/api/train/question";
import { useRouter, useRoute } from "vue-router";
import { usePracticeStore } from "@/store/modules/practice";
import { QuestionChapter, QuestionChapterResp } from "@/types/practice";

const router = useRouter();
const route = useRoute();
const props = defineProps<{
  mode: "wrong" | "favorite";
}>();

// 获取课程id
const courseId: string = route.query.courseId as string;

const chapterList = ref<QuestionChapterResp[]>([]);

const loadFunc = {
  wrong: async () => {
    const chapterRes = await QuestionApi.listWrongQuestionChapters(courseId);
    console.log(chapterRes);
    if (!chapterRes.data?.length) {
      chapterList.value = [];
      return;
    }
    chapterList.value = chapterRes.data;
  },
  favorite: async () => {
    const chapterRes = await QuestionApi.listCollectQuestionChapters(courseId);
    console.log(chapterRes);
    if (!chapterRes.data?.length) {
      chapterList.value = [];
      return;
    }
    chapterList.value = chapterRes.data;
  },
}[props.mode];

const init = async () => {
  await loadFunc();
};
init();

const handleChapterClick = (chapterId: QuestionChapter["id"]) => {
  router.push({
    path: `/practice/${props.mode}`,
    query: {
      chapterId,
      courseId,
    },
  });
};
</script>

<template>
  <div>
    <nut-empty v-if="chapterList.length == 0" :description="mode == 'wrong' ? '没有错误的题目' : '没有收藏的题目'"></nut-empty>
    <div class="p-3" v-else>
      <h2 class="ml-3 my-3 text-xl">章节分类</h2>
      <!-- 章节列表 -->
      <div class="flex flex-col gap-3">
        <div
          v-for="item in chapterList"
          :key="item.chapterId"
          class="py-3 px-4 flex gap-3 bg-gray-1 rd-2"
          @click="handleChapterClick(item?.chapterId)"
        >
          <span class="grow w-0">{{ item.chapterName }}</span>
          <span class="shrink-0">{{ mode == "wrong" ? item.errorQuestionCount : item.collectQuestionCount }} 题</span>
        </div>
      </div>
    </div>
  </div>
</template>
